@page "/skeleton"

<PageTitle>Blazor Skeleton Component | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="RadzenSkeleton component displays loading placeholders with various animation types.">
</HeadContent>

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Skeleton
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The <code>RadzenSkeleton</code> component is used to display loading placeholders while content is being loaded. 
    It supports different shapes and animation types that can be combined independently.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase loading placeholders with multiple shape variants (Text/Circular/Rectangular), responsive text sizing based on parent font-size, animation types (None/Wave/Pulse), and complex examples demonstrating card layouts and DataGrid loading states.
</RadzenText>

<RadzenText Anchor="skeleton#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Basic Usage
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Variant</code> property to specify the skeleton shape and <code>Style</code> to control dimensions. The component supports three shape variants - Text, Circular, and Rectangular.
</RadzenText>

<RadzenExample Example="SkeletonBasic">
    <SkeletonBasic />
</RadzenExample>

<RadzenText Anchor="skeleton#text-size" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Text size
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The height value of the default Text variant is a function of the parent's element font-size.
</RadzenText>
<RadzenExample Example="SkeletonTextSize">
    <SkeletonTextSize />
</RadzenExample>

<RadzenText Anchor="skeleton#animations" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Animations
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The component has three animation types (None, Wave, Pulse).
</RadzenText>

<RadzenExample Example="SkeletonAnimations">
    <SkeletonAnimations />
</RadzenExample>

<RadzenText Anchor="skeleton#complex-example" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Complex Example
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Here's how you might use skeletons in a card layout to show loading states.
</RadzenText>

<RadzenExample Example="SkeletonCard">
    <SkeletonCard />
</RadzenExample>

<RadzenText Anchor="skeleton#datagrid-loading" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DataGrid Loading Example
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    This example demonstrates how to use skeletons to show loading states while a DataGrid is loading data. 
    The skeleton mimics the actual DataGrid structure including headers, rows, and pagination.
</RadzenText>

<RadzenExample Example="SkeletonDataGrid">
    <SkeletonDataGrid />
</RadzenExample>
